<template>
  <div>
    <div style="margin-top: 10px">
<!--        type="card"-->
      <el-carousel  type="card" >
<!--          imgList全部的值 item每一项 [1,2,3]-->
        <el-carousel-item v-for="item in imgList" :key="item.id">
<!--            v-bind -->
        <div  style="width: 100%;height: 100%;position: relative">
            <a href="javascript:;" @click="goodsBanner(item.url)" ><img style="width: 100%;height:100%" :src='item.img' alt=""></a>
            <div style="position:absolute;left: 30px;bottom: 30px;font-size: 20px;font-weight: bold;color: #000;z-index:999">{{item.title}}</div>
        </div>
        </el-carousel-item>
      </el-carousel>
    </div>



      <div style="margin-top: 10px">
          <el-row :gutter="10">

              <el-col :span="6">
                  <el-card class="custom-padding">
                      <div style="padding: 10px 0; font-size: 20px; ">销量排行榜</div>

                      <div style="padding: 10px 0">
                          <el-row v-for="(item, index) in sales" :key="item.id">
                              <div style="padding: 10px 0; cursor: pointer;" @click="goodsDetail(item.id)">
                                  <el-col :span="2" style="padding-top: 5px">
                                      <span v-if="index === 0" style="color: gold">{{ index + 1 }}</span>
                                      <span v-if="index === 1" style="color: silver">{{ index + 1 }}</span>
                                      <span v-if="index === 2" style="color: coral">{{ index + 1 }}</span>
                                      <span v-if="index > 2">{{ index + 1 }}</span>
                                  </el-col>
                                  <el-col :span="10"><el-image :src="item.imgs[0]" style="width: 100%; height: 80px" fit="contain"></el-image></el-col>
                                  <el-col :span="12">
                                      <div style="overflow: hidden; height: 80px; font-size: 12px">
                                          {{ item.description }}
                                      </div>
                                  </el-col>
                              </div>
                          </el-row>
                      </div>
                  </el-card>
              </el-col>

              <el-col :span="18">
                  <el-card>
                      <div style="padding: 10px 0; font-size: 20px;">推荐商品</div>
                      <div style="padding: 10px 0">
                          <el-row :gutter="10">
                              <el-col :span="6" v-for="item in recommend" :key="item.id" style="margin-bottom: 10px">

                                  <el-card :body-style="{ padding: '0px' }">
                                      <el-image :src="item.imgs[0]"  fit="contain" class="image"  @click="goodsDetail(item.id)"></el-image>
                                      <div style="padding: 14px;">
                                          <span class="item-title">{{ item.name.slice(0,10) }}……</span>
                                          <div class="bottom clearfix">
                                              <time class="time"> ￥ {{ item.price }}</time>
                                              <el-button type="text" class="button"  @click="goodsDetail(item.id)" style="color: rgb(255,105,0)">查看</el-button>
                                          </div>
                                      </div>
                                  </el-card>

                              </el-col>
                          </el-row>
                      </div>
                  </el-card>
              </el-col>


          </el-row>

      </div>


      <!--    其他-->
    <div style="margin-top: 10px">
      <el-card>
        <el-row :gutter="10">

            <div  style="padding: 10px 0; font-size: 20px;">商品分类</div>

            <el-col :span="24"  style="margin-bottom: 30px;padding: 19px 0px" >
                <div style="">
                    <div style="display: flex;justify-content: space-around;text-align: center; border-bottom: none">
                        <div class="category-item" @click="getGoodsByCategory(item.id)" v-for="item in categories" :key="item.id"
                             :class="{ active: (activeIndex === item.id)}" style="font-size:21px;border: 1px dashed rgb(255,106,0); width:160px;height:80px;line-height: 70px; ">{{item.name }}
                        </div>
                    </div>
                </div>

            </el-col>


<!--          <el-col :span="4">-->
<!--            <div style="border: 1px dashed #ccc; text-align: center; border-bottom: none">-->
<!--              <div class="category-item" @click="getGoodsByCategory(item.id)" v-for="item in categories" :key="item.id"-->
<!--                   :class="{ active: (activeIndex === item.id)}">{{item.name }}-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-col>-->

          <el-col :span="24">
            <!--          分类商品-->
            <div style="min-height: 150px">
              <el-row :gutter="10">
                <el-col :span="6" v-for="item in tableData" :key="item.id">

                    <el-card >
                        <img :src="item.imgs[0]"   @click="goodsDetail(item.id)" style="display: block;height: 130px;margin:0 auto;">
                        <div style="padding: 14px;">
                            <span class="item-title">{{ item.name.slice(0,5) }}……</span>
                            <div class="bottom clearfix">
                                <time class="time"> ￥ {{ item.price }}</time>
                                <el-button type="text" class="button"  @click="goodsDetail(item.id)" style="color: rgb(255,105,0)">查看</el-button>
                            </div>
                        </div>
                    </el-card>

                </el-col>
              </el-row>
            </div>


            <!--      分页-->
            <div style="margin: 20px auto;display: block">
              <el-pagination
                  background
                  small
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum" 
                  :page-size="pageSize"
                  :page-sizes="[4, 8, 12]"
                  layout=" prev, pager, next"
                  :total="total"
              >
              </el-pagination>
            </div>

          </el-col>
        </el-row>
      </el-card>
        <img src="../../assets/bg.png" alt="" style="width:1200px;display: block;margin: 50px auto">

    </div>


  </div>
</template>

<script>
import API from "@/utils/request";

const url = "/api/video/"

export default {
  name: "Home",
  data() {
    return {
      sales: [],
      recommend: [],
      tableData: [],
      activeIndex: 0,
      imgList: [],
      user: {},
      categories: [],
      pageNum: 1,
      pageSize: 8,
      total: 0
    };
  },
  created() {
    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    this.load()
  },
  methods: {
    goodsBanner(url) {
    
      this.$router.replace({path: '/front/goods', query: {id: url.replace(/.*id=(\d+).*/, '$1')}})
    },
        goodsDetail(id) {
    
      this.$router.replace({path: '/front/goods', query: {id: id}})
    },
    getGoodsByCategory(id) {
      this.activeIndex = id
this.pageNum=1
      // this.handleCurrentChange(1)
      this.loadTable(id)
    },
    load() {
        //向后端发送get请求 请求路径为"/api/carousel" ，then接收后端接口返回的值
      API.get("/api/carousel").then(res => {
        this.imgList = res.data
      })

      API.get("/api/product/recommend").then(res => {
        this.recommend = res.data

        this.recommend.forEach(item => {
          // 处理下表格的图片显示
          if (!item.imgs) {
            item.imgs = ['']
          } else {
            item.imgs = JSON.parse(item.imgs)
          }
        })
      })

      API.get("/api/product/sales").then(res => {
        this.sales = res.data

        this.sales.forEach(item => {
          // 处理下表格的图片显示
          if (!item.imgs) {
            item.imgs = ['']
          } else {
            item.imgs = JSON.parse(item.imgs)
          }
        })
      })

      API.get("/api/classify").then(res => {
        this.categories = res.data
        this.activeIndex = res.data[0].id
        this.loadTable(res.data[0].id)
      })
    },
    loadTable(categoryId) {
      API.get("/api/product/byCategory/" + categoryId, {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total

        this.tableData.forEach(item => {
          // 处理下表格的图片显示
          if (!item.imgs) {
            item.imgs = ['']
          } else {
            item.imgs = JSON.parse(item.imgs)
          }
        })
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.loadTable(this.categories[0].id)
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.loadTable(this.categories[0].id)
    }
  },
};
</script>

<style scoped>
.active {
  color: rgb(255,105,0) !important;
}

.category-item {
  padding: 5px 0;
  border-bottom: 1px dashed rgb(255,105,0);
  color: #666;
  cursor: pointer;
}

.line1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-title {
  cursor: pointer;
}
.item-title:hover {
  color: rgb(255,105,0);
}

.custom-padding .el-card__body>div:nth-child(2) {
    padding: 19px 0!important;

}

</style>
